<template>
  <view class="u-p-l-20 u-p-r-20 u-p-t-20">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <uni-section title="活动列表" type="line"></uni-section>
    <view class="list-container">
        <view class="list-item" v-for="(item, index) in activityList" :key="index">
          <!-- 图片部分 -->
          <image :src="item.thumbnail" class="list-image"></image>
          <!-- 文本部分 -->
          <view class="list-text" @click="skip(item.id)">
			<view>
				<text style="font-weight: bold;">{{ item.activityName }}</text>
				<text v-if="item.flag" style="font-weight: bold; float:right">已报名</text>
				<text v-else style="font-weight: bold; float:right" @click.stop="signUp(item.id)">点击报名</text>
			</view>  
            <view>
              <text>{{ item.remark }}</text>
            </view>
			<view>
				<text>活动时间：{{ item.startTime }}~{{ item.endTime }}</text>
			  </view>
		  </view>
        </view>
      </view>
	  <view v-if="showBottom" style="text-align: center;">已经到底了~~~</view>
  </view>
</template>

<script>
	import { listLove,listUserLove } from "@/api/system/love.js"
	import { addActivityUser } from "@/api/system/activityUser.js"
	import config from "@/config.js" 
	
  export default {
    data() {
      return {
		userId : 0,
        current: 0,
        swiperDotIndex: 0,
		showBottom:false,
		showA : false,
		pageNum: 1, // 当前页码
		pageSize: 10,
		params : {
			isTop: "",
			pageNum: null,
			pageSize: null,
			orderByColumn: "createTime",
			isAsc: "desc",
			userId : null,
		},
		tActivityUser:{
			userId:null,
			activityId:null
		},
		activityList: [],
        data: []
      }
    },
	onLoad() {
	  this.userId = this.$store.state.user.userId;
	  this.findTopList();
	  this.findActivityList();
	},
	onUnload() {
		
	},
	onPageScroll(e) {
	    this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if(!this.showBottom){
			this.loadStatus = 'loading';
			// 获取数据
			this.pageNum++;
			this.findActivityList()
		}
	    
	},
	// 下拉刷新
	onPullDownRefresh() {
		// 获取数据
	this.activityList=[];
	this.pageNum=1;
	this.showBottom = false;
	this.findActivityList();
	
	},
    methods: {
		skip(id){
			this.$tab.navigateTo('/pages/work/activityIndex?id=' + id)
		},
		signUp(id){
			this.tActivityUser.activityId = id;
			addActivityUser(this.tActivityUser).then(response => {
				if (response.code === 200) {
					alert("成功");
				}
			});	
		},
		findTopList() {
			this.params.pageNum = 1;
			this.params.pageSize = 1;
			this.params.isTop="Y";
			listLove(this.params).then(response => {
				this.data = [];
				if (response.code === 200) {
					let rows = response.rows;
					if(rows.length > 0){
						for (let i=0; i<rows.length; i++) {
							if(rows[i].activityImg!=null&&rows[i].activityImg!=""){
								let urlList = rows[i].activityImg.split(",");
								
								for (var j=0;j<urlList.length;j++){
									let course = {};
									course.image = config.baseUrl+urlList[j];
									this.data.push(course);
								};
							}else{
								this.data.push({
									image:onfig.baseUrl + '/profile/default.jpg'
								});
							}
						}
					}
				}
			});	
		},
		findActivityList(){
			this.params.pageNum = this.pageNum;
			this.params.pageSize = this.pageSize;
			this.params.isTop="N";
			this.params.userId = this.userId;
			listLove(this.params).then(response => {
				if (response.code === 200) {
					if(response.rows.length!==this.pageSize){
						this.showBottom=true;
					}
					let rows = response.rows;
					if(rows.length > 0){
						for (let i=0; i<rows.length; i++) {
							if(rows[i].thumbnail!=null&&rows[i].thumbnail!=""){
								rows[i].thumbnail =config.baseUrl + rows[i].thumbnail;
							}else{
								rows[i].thumbnail =config.baseUrl + '/profile/default.jpg';
							}
							this.activityList.push(rows[i])
						}
					}
				}
			});	
			// 关闭刷新
			uni.stopPullDownRefresh();
		},
		
      clickBannerItem(item) {
        console.info(item)
      },
      changeSwiper(e) {
        this.current = e.detail.current
      }
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

.list-container {
  display: flex;
  flex-direction: column;
}
.list-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.list-image {
  width: 100rpx;
  height: 100rpx;
  margin-right: 10px;
}
.list-text {
   display: flex;
   flex-direction: column;
}

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
</style>
